<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    width="550px"
    @close="handleClose">
    <el-form ref="modelForm" :model="modelForm" :rules="rules" label-width="80px">
      <el-form-item label="上级菜单" prop="parentIds">
        <treeselect
          v-model="modelForm.parentIds"
          :searchable="true"
          :open-on-click="true"
          :clear-on-select="true"
          :close-on-select="true"
          :options="dataList"
          :normalizer="normalizer"
          placeholder="上级菜单"/>
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="资源名称" prop="name">
            <el-input v-model="modelForm.name" placeholder="资源名称"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="resourceType" label="资源类型">
            <el-radio-group :disabled="(modelForm.id !== null)" v-model="modelForm.resourceType" @change="changeType">
              <el-radio-button label="MENU">菜单</el-radio-button>
              <el-radio-button label="BUTTON">按钮</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="bVueShow">
        <el-col :span="12">
          <el-form-item label="vue组件" prop="vue">
            <el-input v-model="modelForm.vue" placeholder="vue组件路径,不以/开头"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="菜单状态" prop="hidden" required>
            <el-radio-group v-model="modelForm.hidden">
              <el-radio-button label="0">显示</el-radio-button>
              <el-radio-button label="1">隐藏</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row v-if="bVueShow">
        <el-col :span="12">
          <el-form-item label="path路由" prop="path">
            <el-input v-model="modelForm.path" placeholder="vue router路由路径"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="菜单图标" prop="icon">
            <el-input v-model="modelForm.icon" placeholder="图标"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item v-if="!bVueShow" label="请求地址" prop="url">
        <el-input v-model="modelForm.url" placeholder="请求地址，以/开头"/>
      </el-form-item>
      <el-form-item v-if="!bVueShow" label="请求方式" prop="method">
        <el-radio-group v-model="modelForm.method">
          <el-radio-button label="post">POST</el-radio-button>
          <el-radio-button label="put">PUT</el-radio-button>
          <el-radio-button label="patch">PATCH</el-radio-button>
          <el-radio-button label="delete">DELETE</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="权限标识" prop="permission">
            <el-input v-model="modelForm.permission" placeholder="权限标识"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="显示排序" prop="sort">
            <el-input v-model="modelForm.sort" placeholder="序号"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="资源状态" required>
        <el-radio-group v-model="modelForm.status">
          <el-radio
            v-for="item in dictOptions"
            :key="item.dictCode"
            :label="item.dictValue"
          >{{ item.dictLabel }}</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="resetForm">取 消</el-button>
      <el-button :loading="isSubmit" type="primary" @click="handleSubmit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
// import the component
import Treeselect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

import resultCode from '@/utils/resultCode'
import { getResourceMenuList, add, update } from '@/api/resource'

export default {
  components: { Treeselect },
  data() {
    return {
      visible: false,
      isSubmit: false,
      bVueShow: true,
      title: '添加资源',
      dictOptions: [],
      dataList: [],
      normalizer(node) {
        return {
          id: node.id,
          label: node.name,
          children: node.children
        }
      },
      modelForm: {
        id: null,
        parentIds: null,
        resourceType: 'MENU',
        vue: null,
        path: null,
        hidden: 0,
        alwaysShow: true,
        noCache: true,
        url: null,
        name: null,
        permission: null,
        icon: null,
        method: null,
        sort: null,
        status: null
      },
      rules: {
        name: [
          { required: true, message: '请输入资源名称', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        resourceType: [
          { required: true, message: '请选择资源类型', trigger: 'blur' }
        ],
        permission: [
          { required: true, message: '请输入权限标识', trigger: 'blur' },
          { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' }
        ],
        vue: [
          { required: true, message: '请输入vue组件', trigger: 'blur' },
          { min: 3, max: 100, message: '长度在 3 到 100 个字符', trigger: 'blur' }
        ],
        path: [
          { required: true, message: '请输入vue router路由路径', trigger: 'blur' },
          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
        ],
        url: [
          { required: true, message: '请输入url请求地址', trigger: 'blur' },
          { min: 3, max: 100, message: '长度在 3 到 100 个字符', trigger: 'blur' }
        ],
        method: [
          { required: true, message: '请选择请求方式', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    init(dicts, model) {
      this.dictOptions = dicts
      if (model) { // 修改逻辑，回填数据
        this.title = '修改资源'
        this.modelForm.parentIds = model.parentId || null
        this.modelForm.id = model.id || null
        this.modelForm.name = model.name || null
        this.modelForm.sort = model.sort || null
        this.modelForm.status = model.status || null
        console.log('------model.hidden=' + model.hidden)
        if (model.hidden === null || !model.hidden) {
          this.modelForm.hidden = 0
        } else {
          this.modelForm.hidden = 1
        }
        this.modelForm.resourceType = model.resourceType || null
        this.modelForm.vue = model.vue || null
        this.modelForm.path = model.path || null
        this.modelForm.icon = model.icon || null
        this.modelForm.method = model.method || null
        this.modelForm.url = model.url || null
        this.modelForm.permission = model.permission || null
        if (model.resourceType === 'MENU') {
          this.bVueShow = true
        } else {
          this.bVueShow = false
        }
      } else { // 添加逻辑
        this.title = '添加资源'
        this.bVueShow = true
        this.modelForm.parentIds = null
        this.modelForm.id = null
        this.modelForm.name = null
        this.modelForm.resourceType = 'MENU'
        this.modelForm.vue = null
        this.modelForm.path = null
        this.modelForm.icon = null
        this.modelForm.url = null
        this.modelForm.hidden = 0
        this.modelForm.method = 'post'
        this.modelForm.permission = null
        this.modelForm.sort = null
        this.modelForm.status = null
        this.dictOptions.forEach(dict => {
          if (dict.isDefault === 'Y') {
            this.modelForm.status = dict.dictValue
          }
        })
      }
      this.getDataList()
      this.visible = true
    },
    changeType: function(value) {
      console.log('========' + value)
      if (value === 'MENU') {
        this.bVueShow = true
        this.modelForm.method = null
        this.modelForm.url = null
      } else {
        this.bVueShow = false
        this.modelForm.method = 'post'
        this.modelForm.vue = null
        this.modelForm.path = null
        this.modelForm.icon = null
        this.modelForm.hidden = null
      }
    },
    getDataList: function() {
      getResourceMenuList().then(response => {
        const result = response.data // 请求接口返回的内容
        if (result.code === resultCode.SUCCESS) {
          this.dataList = result.data
        }
      })
    },
    handleSubmit: function() {
      this.$refs.modelForm.validate((valid) => {
        if (!valid) {
          return false
        }
        this.isSubmit = true
        if (this.modelForm.id == null) { // 新增
          add(this.modelForm).then(response => {
            const result = response.data // 请求接口返回的内容
            if (result.code === resultCode.SUCCESS) {
              this.visible = false
              this.$emit('refreshDataList')
              this.$message.success('添加成功')
            }
            this.isSubmit = false
          }).catch(err => {
            this.isSubmit = false
          })
        } else {
          update(this.modelForm).then(response => {
            const result = response.data // 请求接口返回的内容
            if (result.code === resultCode.SUCCESS) {
              this.visible = false
              this.$emit('refreshDataList')
              this.$message.success('修改成功')
            }
            this.isSubmit = false
          })
        }
      })
    },
    resetForm: function() {
      this.$refs.modelForm.resetFields()
      this.visible = false
    },
    handleClose: function() {
      this.$refs.modelForm.resetFields()
    }
  }
}
</script>
